<template>
  <div class="madp-manager-view-todo">
    <div class="show-date">数据日期：{{ showDate }}</div>
    <div class="header" @click="intoDataBoard">
      <div class="info">
        <span class="text">访客总数</span>
        <span class="number">{{ customerData.visitorYesterdayNumber | formatNum }}</span>
        <div class="add">
          <span>今日+</span>
          <span>{{ customerData.visitorNumber | formatNum }}</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="info">
        <span class="text text1">客户人数</span>
        <span class="number">{{ customerData.contactNumber | formatNum }}</span>
        <div class="add">
          <span>今日+</span>
          <span>{{ customerData.contactAdd | formatNum }}</span>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="container-item" v-for="item in containerList" :key="item.type">
        <div class="title">
          <img :src="item.icon" alt="" />
          <span class="name">{{ item.name }}</span>
          <span v-if="item.type != 3" class="more" @click="intoDetail(item.type)">更多</span>
        </div>
        <div class="main">
          <!-- 客户雷达 -->
          <div v-if="item.type == 1">
            <div class="into-list">
              <el-empty v-if="customerInfoList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无客户数据"></el-empty>
              <div v-else class="customer-into-list">
                <div class="item" v-for="(item, idx) in customerInfoList" :key="idx">
                  <img :src="item.headimgurl || $defaultAvatar" alt="" srcset="" />
                  <div class="right">
                    <div class="top">
                      <div class="name text-one-ellipsis">{{ item.nickname }}</div>
                      <div class="label">{{ item.type == 1 ? '行内客户' : item.type == 2 ? 'CRM客户' : '访客' }}</div>
                      <div class="time">{{ item.time }}</div>
                    </div>
                    <div class="desc text-one-ellipsis">{{ item.radarDesc }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 待办事项 -->
          <div v-if="item.type == 2">
            <div class="into-list">
              <el-empty v-if="taskInfo.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无任务数据"></el-empty>

              <div v-else class="task-into">
                <div class="task-title">
                  <img :src="taskInfo[0].icon" alt="" srcset="" />
                  <div class="name">{{ taskInfo[0].taskName }}</div>
                  <!-- <i class="el-icon-arrow-right"></i> -->
                </div>
                <div class="task-desc">
                  <span class="text-two-ellipsis">{{ taskInfo[0].content || taskInfo[0].title }}</span>
                </div>
                <div class="bottom">
                  <div class="left">
                    <div class="text-one-ellipsis" style="max-width: 210px">发布人：{{ taskInfo[0].createUserName }}</div>
                    <div>截止时间：{{ taskInfo[0].endTime }}</div>
                  </div>
                  <div class="go-btn" @click="goFinish(taskInfo[0])">去完成</div>
                </div>
              </div>
            </div>
            <div class="into-list">
              <div class="task-into">
                <div class="task-title">
                  <img src="@/assets/img/reminder/daibanshixiang.png" alt="" srcset="" />
                  <div class="name">待办事项</div>
                  <!-- <i class="el-icon-arrow-right"></i> -->
                </div>
                <el-empty v-if="todoList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无待办数据"></el-empty>
                <div v-else>
                  <div v-for="(item1, idx) in todoList" :key="idx">
                    <div class="task-desc">
                      <span class="text-two-ellipsis">{{ item1.doBody }}</span>
                    </div>
                    <div class="bottom">
                      <img :src="item1.avatar || $defaultAvatar" alt="" srcset="" />
                      <div class="name">{{ item1.remark }}</div>
                      <div class="go-btn" @click="doFollow(item1)">跟进</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 营销事件提醒 -->
          <div v-if="item.type == 3">
            <div class="into-list">
              <div class="swiper-manager-view">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item1, index) in showRemindList" :key="index">
                    <div v-for="(item2, idx) in item1" :key="idx" class="item" @click="intoRemindDetail(item2)">
                      <div>
                        {{ item2.name }}
                        <span v-if="item2.viewStatus == 0" class="red-pot"></span>
                      </div>
                      <div>{{ item2.count }}</div>
                    </div>
                  </div>
                </div>
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import managerViewApi from '@/api/manager-view.js'
import * as managerReminderApi from '@/api/manager-reminder.js'
import * as customerDetailApi from '@/api/customer-details'
export default {
  components: {},
  data() {
    return {
      showDate: '',
      customerData: {},
      containerList: [
        {
          name: '客户雷达',
          icon: require('@/assets/img/managerView/kehuleida.png'),
          type: 1
        },
        {
          name: '待办任务',
          icon: require('@/assets/img/managerView/daibanshixiang.png'),
          type: 2
        },
        {
          name: '营销事件提醒',
          icon: require('@/assets/img/managerView/shijiantixing.png'),
          type: 3
        }
      ],
      // 客户雷达
      customerInfoList: [],
      // 任务信息
      taskInfo: [],
      // 待办列表
      todoList: [],
      // 事件提醒
      remindList: [
        {
          name: '产品到期',
          props: 'productExpireVO',
          count: 0,
          type: 1,
          viewStatus: 1
        },
        {
          name: '生日提醒',
          props: 'birthdayRemindVO',
          count: 0,
          type: 2,
          viewStatus: 1
        },
        {
          name: '活期余额',
          props: 'currentBalanceVO',
          count: 0,
          type: 3,
          viewStatus: 1
        },
        {
          name: '未交流客户',
          props: 'noCommunicationContactVO',
          count: 0,
          type: 4,
          viewStatus: 1
        },
        {
          name: '营销线索',
          props: 'marketingClueVO',
          count: 0,
          type: 5,
          viewStatus: 1
        }
      ]
    }
  },
  computed: {
    showRemindList() {
      let len = this.remindList.length
      let arr = []
      for (let i = 0; i < len; i += 6) {
        arr.push(this.remindList.slice(i, i + 6))
      }
      return arr
    }
  },
  created() {},
  mounted() {
    // let date = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
    let date = new Date()
    this.showDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, 0)}-${date.getDate().toString().padStart(2, 0)}`

    this.initSwiper()
    this.getCustomerData()
    this.getContactRadarTop3()
    this.getTaskList()
    this.getTodoListTwo()
    this.getBirthdayRemindPage()
  },
  activated() {},
  methods: {
    intoDataBoard() {
      this.$router.push({
        path: '/managerView/data-board'
      })
    },
    intoDetail(type) {
      if (type == 1) {
        // 客户雷达
        this.$router.push({
          path: '/managerView/customer-radar'
        })
      } else if (type == 2) {
        // 客户雷达
        this.$router.push({
          path: '/managerReminder'
        })
      }
    },
    // 完成任务
    goFinish(info) {
      console.log(info)
      if (info.isMoments == 1) {
        console.log('99999999999')
        // 去添加
        this.$wxApi.navigateToAddCustomer((res) => {
          //
        })
      } else if (info.isMoments == 0) {
        console.log('000000000')
        // 去发布
        let attachments = []
        if (info.imgUrl && info.imgUrl.length > 0 && info.mediaId) {
          info.mediaId.forEach((ele) => {
            attachments.push({
              msgtype: 'image', // 消息类型，必填
              image: {
                mediaid: ele // 图片的素材id
              }
            })
          })
        } else if (info.imgUrl && info.imgUrl.length > 0 && info.mediaId) {
          info.mediaId.forEach((ele) => {
            attachments.push({
              msgtype: 'video', // 消息类型，必填
              video: {
                mediaid: ele // 视频的素材id
              }
            })
          })
        }
        this.$wxApi.shareToExternalMoments(info.content, attachments).then((res) => {
          console.log(res)
        })
      }
    },
    // 跟进任务
    doFollow(info) {
      if (!info.wxExternalUserid) return
      customerDetailApi
        .changeToDoState({
          id: info.id,
          state: 1
        })
        .then((res) => {
          this.getTodoListTwo()
          this.$wxApi
            .openEnterpriseChat({
              externalUserIds: [info.wxExternalUserid]
            })
            .then((res) => {
              // console.log('打开会话成功====', res)
            })
        })
    },
    intoRemindDetail(info) {
      if (info.type == 1 || info.type == 2 || info.type == 3) {
        this.$router.push({
          path: '/managerView/remind-page',
          query: {
            type: info.type
          }
        })
      } else if (info.type == 4) {
        this.$router.push({
          path: '/managerView/remind-customer',
          query: {}
        })
      } else if (info.type == 5) {
        this.$router.push({
          path: '/managerView/marketing-thread',
          query: {}
        })
      }
    },
    initSwiper() {
      this.swiperActivity = new Swiper('.swiper-manager-view', {
        direction: 'horizontal', // 轮播图轮播方向，horizontal为横向，
        loop: false, // 循环模式选项
        spaceBetween: 8, // 左右距离，每一张图之间的间距，不用在css中设置margin了
        slidesPerView: 'auto', // 默认一个屏幕显示几张图，必须auto！要不轮播到最后一张图时，右侧会是空白，很丑！
        centeredSlides: true, // 每屏，居中显示
        autoplay: false,
        autoplayDisableOnInteraction: false,
        // 下面两个属性一般是数据从后台请求后或者点击轮播图片跳转页面后，需要初始化swiper
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        pagination: '.swiper-pagination', // 分页按钮
        onClick: (swiper) => {
          // let item = JSON.parse(swiper.clickedSlide.attributes['data-item'].nodeValue) //转换为对象
          // this.mxHandleClick(item)
        },
        onSlideChangeEnd: (swiper) => {
          //切换结束时，获取slide序号
          // _this.swiperIndex = swiper.realIndex + 1 //realIndex: 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
          // this.activeIndex = swiper.realIndex
        }
      })
    },
    // 获取客户数据
    getCustomerData() {
      managerViewApi
        .getCustomerData({
          wxUserId: this.$store.state.vuex_wxUserId
        })
        .then((res) => {
          this.customerData = res.data.data
        })
    },
    // 获取雷达数据
    getContactRadarTop3() {
      managerViewApi
        .getContactRadarTop3({
          wxUserId: this.$store.state.vuex_wxUserId
        })
        .then((res) => {
          this.customerInfoList = res.data.data
        })
    },
    // 获取任务信息
    getTaskList() {
      managerReminderApi
        .getTaskList({
          wxUserId: this.$store.state.vuex_wxUserId,
          status: 1,
          current: 1,
          size: 2
        })
        .then((res) => {
          let info = res.data.data.records[0]
          if (info) {
            switch (info.isMoments) {
              case 0:
                info.icon = require('@/assets/img/reminder/pengyouquanrenwu.png')
                info.taskName = '朋友圈任务'
                break
              case 1:
                info.icon = require('@/assets/img/reminder/huokerenwu.png')
                info.taskName = '获客任务'
                break
            }
            this.taskInfo = [info]
          }
        })
    },
    // 获取待办列表
    getTodoListTwo() {
      managerViewApi
        .getTodoListTwo({
          wxUserId: this.$store.state.vuex_wxUserId
        })
        .then((res) => {
          this.todoList = res.data.data
        })
    },
    // 营销事件提醒
    getBirthdayRemindPage() {
      managerViewApi
        .getOverview({
          wxUserId: this.$store.state.vuex_wxUserId
        })
        .then((res) => {
          let info = res.data.data
          this.remindList.forEach((ele) => {
            ele.count = info[ele.props].count
            ele.viewStatus = info[ele.props].viewStatus
          })
        })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-manager-view-todo {
  height: 100%;
  background-image: url('../../assets/img/managerView/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 10px;
  .show-date {
    padding-right: 16px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(44, 44, 44, 0.5);
    text-align: right;
  }
  .header {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .line {
      width: 1px;
      height: 53px;
      background: rgba(44, 44, 44, 0.1);
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: center;
      .text {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.5);
      }
      .text1 {
        color: rgba(44, 44, 44, 0.8);
      }
      .number {
        margin-top: 8px;
        margin-bottom: 4px;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #2c2c20;
      }
      .add {
        background: #ffffff;
        border-radius: 8px;
        padding: 2px 8px;
        span {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ed5555;
        }
      }
    }
  }
  .container {
    margin-top: 16px;
    padding: 16px;
    background: #fafafa;
    border-radius: 12px 12px 0px 0px;
    .container-item {
      margin-bottom: 24px;
      .title {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
        }
        .name {
          margin-left: 10px;
          flex: 1;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2c2c2c;
        }
        .more {
          float: right;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(44, 44, 44, 0.8);
        }
      }
      .main {
        margin-top: 10px;
        .into-list {
          padding: 16px;
          background: #ffffff;
          box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
          border-radius: 8px;
          margin-bottom: 10px;
          .customer-into-list {
            .item {
              display: flex;
              margin-bottom: 16px;
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
              }
              .right {
                margin-left: 8px;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .top {
                  display: flex;
                  align-items: center;
                  .name {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #202020;
                    max-width: 85px;
                  }
                  .label {
                    margin-left: 8px;
                    padding: 1px 4px;
                    font-size: 10px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    background: #d5a874;
                    border-radius: 2px;
                  }
                  .time {
                    flex: 1;
                    text-align: right;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(32, 32, 32, 0.4);
                  }
                }
                .desc {
                  width: 250px;
                }
              }
            }
            :last-child {
              margin-bottom: 0;
            }
          }
          .task-into {
            .task-title {
              display: flex;
              align-items: center;
              img {
                width: 24px;
                height: 24px;
                border-radius: 50%;
              }
              .name {
                margin-left: 8px;
                flex: 1;
                font-size: 15px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2c2c2c;
              }
              .el-icon-arrow-right {
                float: right;
                font-size: 18px;
              }
            }
            .task-desc {
              background: #fafafa;
              padding: 16px;
              margin-top: 16px;
              margin-bottom: 10px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2c2c2c;
            }
            .bottom {
              display: flex;
              align-items: center;
              .left {
                flex: 1;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(44, 44, 44, 0.8);
              }
              .go-btn {
                float: right;
                border-radius: 13px;
                border: 1px solid rgba(237, 85, 80, 0.8);
                padding: 4px 24px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ed5555;
              }
              img {
                width: 18px;
                height: 18px;
                border-radius: 50%;
              }
              .name {
                max-width: 210px;
                margin-left: 4px;
                flex: 1;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #202020;
              }
            }
          }
          .swiper-manager-view {
            z-index: 0;
            width: 100%;
            height: 200px;
            position: relative;
            overflow: hidden;
            .swiper-slide {
              display: flex;
              flex-wrap: wrap;
              .item {
                width: 30%;
                height: 85px;
                box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-right: 8px;
                padding: 0 10px;
                :nth-child(1) {
                  font-size: 14px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: rgba(44, 44, 44, 0.8);
                  position: relative;
                  background: none;
                  .red-pot {
                    position: absolute;
                    top: 0px;
                    right: -8px;
                    width: 8px;
                    height: 8px;
                    background: #ed5550;
                    border-radius: 50%;
                  }
                }
                :nth-child(2) {
                  background: none;
                  margin-top: 8px;
                  font-size: 19px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #2c2c2c;
                }
              }
              :nth-child(3n) {
                margin-right: 0;
              }
              :nth-child(1) {
                background: #f0fbfe;
              }
              :nth-child(2) {
                background: #ffefed;
              }
              :nth-child(3) {
                background: #fef6f0;
              }
              :nth-child(4) {
                background: #e7fffc;
              }
              :nth-child(5) {
                background: #ffeff2;
              }
              :nth-child(6) {
                background: #fcf3fd;
              }
            }
            .swiper-pagination-bullets {
              bottom: 0px;
              /deep/.swiper-pagination-bullet {
                width: 4px;
                height: 4px;
                background: rgba(237, 85, 80, 0.2);
                margin: 0 3px;
                // background: rgba(237, 85, 80, 0.2);
                // opacity: 0.3;
              }
              /deep/.swiper-pagination-bullet-active {
                width: 16px;
                height: 4px;
                background: #ed5550;
                border-radius: 2px;
              }
            }
          }
        }
      }
    }
  }
  .el-empty {
    padding: 0;
  }
}
</style>